<template>
    <div>
      <a-card style="width: 100%;margin-bottom: 10px;">
        <a-form-model :layout="layout" :model="form" >

          <a-form-model-item label="字典类型">
            <a-select default-value="" style="width: 120px" placeholder="请选择类型" v-model="form.dictType" >
              <a-select-option value="">
                全部
              </a-select-option>
              <a-select-option v-for="item in dictTypeList"  :key="item.dictType">
                {{item.dictName}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="状态">
            <a-select default-value="" style="width: 120px" placeholder="请选择状态" v-model="form.status" >
              <a-select-option value="">
                全部
              </a-select-option>
              <a-select-option v-for="item in dictStatusList" :key="item.dictValue">
                {{item.dictLabel}}
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item >
            <a-button type="primary" icon="search" @click="getPage">
              查询
            </a-button>
          </a-form-model-item>
        </a-form-model>

      </a-card>

      <a-row type="flex" justify="end" align="middle">
        <a-col :span="2">
          <a-button type="primary"  icon="plus" @click="showAddModel" >
            添加
          </a-button>
        </a-col>
        <!--<a-col :span="3" class="add-type-col">-->
          <!--<a-button type="primary" class="add-type"  icon="folder-add" >-->
            <!--添加类型-->
          <!--</a-button>-->
        <!--</a-col>-->
        <a-col :span="2">
          <a-button type="danger" class="dict-start"  icon="check-circle" @click="onStart" :disabled="startButDisabled" >
            启用
          </a-button>
        </a-col>
        <a-col :span="2">
          <a-button type="danger" class="dict-stop"  icon="stop" @click="onStop" :disabled="stopButDisabled">
            停用
          </a-button>
        </a-col>
        <a-col :span="3">
          <a-button type="danger"  icon="cloud-sync" >
            清理缓存
          </a-button>
        </a-col>
      </a-row>

      <a-table
        :columns="table.colums"
        :data-source="table.data"
        :pagination="pagination"
        :scroll="{ y: 320 }"
        :loading="table.loading"
        row-key="id"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :showHeader="table.showHead"
      >
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
            v-if="table.data.length"
            title="您确定要删除?"
            @confirm="() => onDelete(record,text)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>

        </template>

        <!--<template slot="iconCell" slot-scope="text, record">-->
          <!--<svg-icon :icon-class="record.icon" />-->
        <!--</template>-->

      </a-table>

      <!-- 添加操作框 -->
      <add ref="add"></add>

      <!-- 启动或停用提示框 -->
      <a-modal
        ：title="comfirmModal.title"
        style="top: 20px;"
        :visible="comfirmModal.visible"
        @ok="comfirmModelOk"
        @cancel="confirmModalConcel"
      >

      </a-modal>

    </div>
</template>

<script>

  import {list,typeList,getDataByType,deleteDictData,doStopDictData,doStartDictData} from '@/static/api/base/dict';
  import add from './add';

  //表格列
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      width: '8%',
    },
    {
      title: '字典类型',
      dataIndex: 'dictName',
      width: '13%',
    },
    {
      title: '字典标签',
      dataIndex: 'dictLabel',
      width: '8%',
    },
    {
      title: '字典值',
      dataIndex: 'dictValue',
      width: '8%',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '8%',
      customRender:function (text, record, index){
        if (text =='1'){
          return "正常"
        }else{
          return "停用"
        }
      }
    },
    {
      title: '操作',
      // dataIndex: 'id',
      width: '8%',
      scopedSlots: { customRender: 'operation' },
    },
  ]

    export default {
      name: "list",
      components:{add},
      created() {
        this.getTypeList();
        this.getStatus();
        this.getPage();
      },
      data() {
        return {
          layout: 'inline',
          //查询表单
          form: {
            dictType:'',
            status:'',
          },
          table: {
            colums:columns,
            data:[],
            showHead:true,
            loading: true
          },
          pagination:{
            defaultCurrent: 1,    //默认当前页码
            defaultPageSize: 10,  //默认每页行数
            current:1,  //当前页数
            total:0,    //总行数
            pageSize: 10 ,
            showQuickJumper:true,
            pageSizeOptions:['5','10','15','20'],
            showSizeChanger:true,
          },
          dictTypeList:[],
          dictStatusList: [],
          selectedRowKeys:[],
          selectedRows:[],
          operationFlag:undefined,   //标记当前操作是启用、停用
          comfirmModal: {
            //操作提示框属性
            visible: false,  //操作提示框显示
            title: undefined,  //操作提示框标题
          },

        }
      },
      computed: {
        //判断开启，停用按钮是否可用
        startButDisabled : function (){
          return this.selectedRowKeys.length<=0
        },
        stopButDisabled : function (){
          return this.selectedRowKeys.length<=0
        }
      },
      methods:{
        getPage(){
          //查询数据列表
          this.table.loading=true;
          list(this.form).then(res => {
            this.table.loading=false;
            this.table.data = res.data.list;
            this.pagination.pageSize = res.data.pageSize;
            this.pagination.current = res.data.pageNum;
            this.pagination.total = res.data.total;
          })
        },
        getTypeList(){
          //获取所有字典类型
          typeList().then(res => {
            this.dictTypeList = res.data.data;
          })
        },
        getStatus(){
          //获取数据状态值
          getDataByType('sys_normal_disable').then(res => {
            this.dictStatusList = res.data.data;
          })
        },
        //删除字典数据
        onDelete(record,text){
          deleteDictData(record.id).then(res => {
            let url = this.$route.currentRoute;
            this.$route.push(url);
          })
        },
        //获取选中的数据
        onSelectChange(selectedRowKeys, selectedRows){
          this.selectedRowKeys = selectedRowKeys.map(i => i);
          this.selectedRows = selectedRows;
          debugger
        },
        //批量停用
        onStop(){
          this.operationFlag="2";
          this.comfirmModal.title = "请确认停用选中的"+this.selectedRowKeys.length+"项数据";
          this.comfirmModal.visible=true;  //显示确认操作框
        },
        //批量启用
        onStart(){
          this.operationFlag="1";
          this.comfirmModal.title = "请确认启用选中的"+this.selectedRowKeys.length+"项数据";
          this.comfirmModal.visible=true;  //显示确认操作框
        },
        showAddModel(){
          this.$refs.add.showAdd();
        },
        //操作提示框”确定“
        comfirmModelOk(){

          if (this.operationFlag =='1'){
            //启动操作
            doStartDictData(this.selectedRowKeys).then(res =>{
              debugger
              if (res.data){
                //操作成功刷新页面
                this.getPage();
              }
            })
          }else{
            //停用操作
            doStopDictData(this.selectedRowKeys).then(res =>{
              debugger
              if (res.data){
                //操作成功刷新页面
                this.getPage();
              }
            })
          }

        },
        //操作提示框关闭
        confirmModalConcel(){
          this.comfirmModal.visible=false;
        }

      }

    }
</script>

<style scoped>
  .ant-row-flex{
    margin-bottom: 10px;
  }
  .add-type{
    background-color: #89e7b3;
    border-color:#89e7b3;
  }
  .dict-stop{
    background-color: coral;
  }
  .add-type-col{
    width: 10.5%;
  }
  .dict-start{
    background-color: forestgreen;
    border-color:forestgreen;
  }
  .ant-btn[disabled]{
    background-color: #f5f5f5;
    border-color:#f5f5f5;
  }

</style>
